/**
 * 支付管理页面组件 - 支付订单的创建、管理和监控界面
 *
 * 开发人员：郭畅
 * 开发时间：2025-11-05 至 2025-11-10
 * 模块职责：提供支付订单的完整管理功能，包括订单创建、状态监控、支付链接生成等
 *
 * 技术要点：
 * - 支付订单创建表单和业务逻辑处理
 * - 支付订单列表展示和状态管理
 * - 美团品牌风格的支付界面设计
 * - 前后端支付接口集成和数据交互
 * - 支付流程监控和异常处理机制
 *
 * 开发故事：负责支付管理页面的完整前端实现，与后端支付控制器深度集成，为用户提供便捷的支付订单管理体验。
 */
<template>
  <div class="page-container">
    <div class="page-header">
      <h1 class="page-title">支付管理</h1>
      <p class="page-subtitle">微信支付订单管理与监控</p>
    </div>
    
    <!-- 创建订单区域 -->
    <div class="card-section">
      <div class="card-section-title">
        <i class="el-icon-circle-plus"></i>
        创建新订单
      </div>
      <el-form :inline="true" :model="orderForm" class="action-bar">
        <el-form-item label="产品选择">
          <el-autocomplete
            v-model="orderForm.productName"
            :fetch-suggestions="searchProducts"
            placeholder="请输入产品名称搜索"
            style="width:200px"
            @select="onProductSelect"
            :trigger-on-focus="false"
            :debounce="300"
            :min-length="1"
            clearable>
            <template slot-scope="{ item }">
              <div class="product-suggestion">
                <div class="product-name">{{ item.name }}</div>
                <div class="product-info">{{ item.category }} · {{ formatPrice(item.price, item.currency) }}</div>
              </div>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="orderForm.name" placeholder="请输入商品名称" style="width:200px" />
        </el-form-item>
        <el-form-item label="金额">
          <el-input-number 
            v-model="orderForm.amount" 
            :min="0.01" 
            :precision="2"
            :step="1" 
            :controls="false"
            style="width:140px" />
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="orderForm.payType" style="width:120px">
            <el-option value="wxpay" label="微信支付">
              <i class="el-icon-chat-dot-round" style="color: #06C05F;"></i> 微信支付
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-check" @click="createOrder">创建订单</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 订单列表 -->
    <div class="card-section">
      <div class="card-section-title">
        <i class="el-icon-tickets"></i>
        订单列表
        <el-button size="mini" icon="el-icon-refresh" @click="load" style="margin-left: auto;">刷新</el-button>
      </div>
      
      <el-table :data="orders" style="width:100%" v-loading="loading">
        <el-table-column prop="outTradeNo" label="商户订单号" width="200"/>
        <el-table-column prop="name" label="商品名称" min-width="150"/>
        <el-table-column prop="product.name" label="关联产品" min-width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.product">{{ scope.row.product.name }}</span>
            <span v-else style="color: var(--text-tertiary);">无关联</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额" width="120">
          <template slot-scope="{row}">
            <span style="color: var(--primary-color); font-weight: 600;">¥{{row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="payType" label="支付方式" width="110">
          <template slot-scope="{row}">
            <span v-if="row.payType==='wxpay'">
              <i class="el-icon-chat-dot-round" style="color: #06C05F;"></i> 微信
            </span>
            <span v-else-if="row.payType==='alipay'">
              <i class="el-icon-wallet" style="color: #1677FF;"></i> 支付宝
            </span>
            <span v-else>{{row.payType}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="{row}">
            <span :class="['status-tag', getStatusClass(row.status)]">
              {{getStatusText(row.status)}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="160"/>
        <el-table-column label="操作" width="280" fixed="right">
          <template slot-scope="{row}">
            <el-button size="mini" icon="el-icon-link" @click="simulate(row)" v-if="row.status==='CREATED'">
              模拟支付
            </el-button>
            <el-button size="mini" type="success" icon="el-icon-check" @click="markSuccess(row)" v-if="row.status==='CREATED'">
              标记成功
            </el-button>
            <el-button size="mini" type="warning" icon="el-icon-close" @click="close(row)" v-if="row.status==='CREATED'">
              关闭
            </el-button>
            <el-button size="mini" icon="el-icon-view" @click="viewDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div v-if="!loading && !orders.length" class="empty-state">
        <i class="el-icon-document-delete"></i>
        <p>暂无订单记录</p>
      </div>
    </div>
  </div>
</template>

<script>
import http from '../api/http'

export default {
  data(){ 
    return { 
      enterpriseId: parseInt(localStorage.getItem('enterpriseId')) || 1,
      orders: [], 
      orderForm: { 
        productName: '',
        productId: null,
        name: '', 
        amount: 1.00,
        payType: 'wxpay'
      },
      loading: false
    } 
  },
  async created(){ 
    await this.load() 
  },
  methods:{
    async load(){
      this.loading = true
      try {
        const { data } = await http.get(`/enterprises/${this.enterpriseId}/payments/orders`)
        if(data.code === 0) {
          this.orders = data.data
        }
      } catch(e) {
        this.$message.error('加载订单失败')
      } finally {
        this.loading = false
      }
    },
    async createOrder(){
      if(!this.orderForm.name){
        return this.$message.warning('请输入商品名称')
      }
      if(!this.orderForm.amount || this.orderForm.amount <= 0){
        return this.$message.warning('请输入有效金额')
      }
      
      const loadingMsg = this.$message({
        message: '正在创建订单...',
        type: 'info',
        duration: 0,
        iconClass: 'el-icon-loading'
      })
      
      try {
        const { data } = await http.post(`/enterprises/${this.enterpriseId}/payments/orders`, {
          name: this.orderForm.name,
          amount: this.orderForm.amount,
          userId: null,
          productId: this.orderForm.productId,
          payType: this.orderForm.payType
        })
        loadingMsg.close()
        
        if(data.code === 0){ 
          this.$message.success('订单创建成功')
          this.orderForm.name = ''
          this.orderForm.amount = 1.00
          this.orderForm.productName = ''
          this.orderForm.productId = null
          await this.load()
        } else {
          this.$message.error(data.message || '创建失败')
        }
      } catch(e) {
        loadingMsg.close()
        this.$message.error(e.response?.data?.message || '创建失败')
      }
    },
    async simulate(row){
      try {
        const { data } = await http.get(`/enterprises/${this.enterpriseId}/payments/orders/${row.outTradeNo}/simulate-payurl`, { 
          params: { 
            type: row.payType, 
            name: row.name, 
            money: row.amount 
          } 
        })
        if(data.code === 0){ 
          window.open(data.data.payurl, '_blank')
        }
      } catch(e) {
        this.$message.error('生成支付链接失败')
      }
    },
    async markSuccess(row){
      const loadingMsg = this.$message({
        message: '正在处理支付...',
        type: 'info',
        duration: 0,
        iconClass: 'el-icon-loading'
      })
      
      try {
        const response = await http.post(`/enterprises/${this.enterpriseId}/payments/orders/${row.outTradeNo}/success`, { 
          tradeNo: 'SIM-' + Date.now()
        })
        loadingMsg.close()
        
        // 检查响应结构
        console.log('markSuccess response:', response)
        
        if(response.data && response.data.code === 0){ 
          // 立即更新本地状态（乐观更新）
          row.status = 'SUCCESS'
          row.tradeNo = 'SIM-' + Date.now()
          
          this.$message({
            message: '✓ 支付成功！订单状态已更新',
            type: 'success',
            duration: 2000
          })
          
          // 后台静默刷新完整数据
          setTimeout(() => this.load(), 500)
        } else {
          this.$message.error(response.data?.message || '操作失败')
        }
      } catch(e) {
        loadingMsg.close()
        console.error('markSuccess error:', e)
        this.$message.error(e.response?.data?.message || e.message || '操作失败')
      }
    },
    async close(row){
      this.$confirm('确定要关闭此订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const loadingMsg = this.$message({
          message: '正在关闭订单...',
          type: 'info',
          duration: 0,
          iconClass: 'el-icon-loading'
        })
        
        try {
          const { data } = await http.post(`/enterprises/${this.enterpriseId}/payments/orders/${row.outTradeNo}/close`)
          loadingMsg.close()
          
          if(data.code === 0){ 
            // 立即更新本地状态
            row.status = 'CLOSED'
            
            this.$message({
              message: '订单已关闭',
              type: 'success',
              duration: 2000
            })
            
            // 后台静默刷新
            setTimeout(() => this.load(), 500)
          } else {
            this.$message.error(data.message || '操作失败')
          }
        } catch(e) {
          loadingMsg.close()
          this.$message.error(e.response?.data?.message || '操作失败')
        }
      }).catch(() => {})
    },
    viewDetail(row){
      this.$msgbox({
        title: '订单详情',
        message: this.$createElement('div', {
          class: 'order-detail-modal'
        }, [
          // 订单头部信息
          this.$createElement('div', {
            class: 'order-header'
          }, [
            this.$createElement('div', {
              class: 'order-status-badge',
              class: {
                'status-success': row.status === 'SUCCESS',
                'status-pending': row.status === 'CREATED' || row.status === 'PENDING',
                'status-failed': row.status === 'FAILED' || row.status === 'CLOSED'
              }
            }, [
              this.$createElement('i', {
                class: {
                  'el-icon-success': row.status === 'SUCCESS',
                  'el-icon-time': row.status === 'CREATED' || row.status === 'PENDING',
                  'el-icon-error': row.status === 'FAILED' || row.status === 'CLOSED'
                }
              }),
              this.$createElement('span', this.getStatusText(row.status))
            ]),
            this.$createElement('div', {
              class: 'order-amount'
            }, `¥${row.amount}`)
          ]),
          
          // 订单详细信息
          this.$createElement('div', {
            class: 'order-info-grid'
          }, [
            this.$createElement('div', {
              class: 'info-item'
            }, [
              this.$createElement('div', {
                class: 'info-label'
              }, [
                this.$createElement('i', { class: 'el-icon-document' }),
                '商户订单号'
              ]),
              this.$createElement('div', {
                class: 'info-value'
              }, row.outTradeNo)
            ]),
            
            this.$createElement('div', {
              class: 'info-item'
            }, [
              this.$createElement('div', {
                class: 'info-label'
              }, [
                this.$createElement('i', { class: 'el-icon-goods' }),
                '商品名称'
              ]),
              this.$createElement('div', {
                class: 'info-value'
              }, row.name)
            ]),
            
            this.$createElement('div', {
              class: 'info-item'
            }, [
              this.$createElement('div', {
                class: 'info-label'
              }, [
                this.$createElement('i', { class: 'el-icon-wallet' }),
                '支付方式'
              ]),
              this.$createElement('div', {
                class: 'info-value'
              }, [
                this.$createElement('i', {
                  class: 'el-icon-chat-dot-round',
                  style: { color: '#06C05F', marginRight: '4px' }
                }),
                row.payType === 'wxpay' ? '微信支付' : row.payType
              ])
            ]),
            
            this.$createElement('div', {
              class: 'info-item'
            }, [
              this.$createElement('div', {
                class: 'info-label'
              }, [
                this.$createElement('i', { class: 'el-icon-time' }),
                '创建时间'
              ]),
              this.$createElement('div', {
                class: 'info-value'
              }, row.createdAt || '未知')
            ]),
            
            row.tradeNo ? this.$createElement('div', {
              class: 'info-item'
            }, [
              this.$createElement('div', {
                class: 'info-label'
              }, [
                this.$createElement('i', { class: 'el-icon-link' }),
                '三方订单号'
              ]),
              this.$createElement('div', {
                class: 'info-value'
              }, row.tradeNo)
            ]) : null,
            
            row.product ? this.$createElement('div', {
              class: 'info-item'
            }, [
              this.$createElement('div', {
                class: 'info-label'
              }, [
                this.$createElement('i', { class: 'el-icon-star-on' }),
                '关联产品'
              ]),
              this.$createElement('div', {
                class: 'info-value'
              }, row.product.name)
            ]) : null
          ].filter(Boolean))
        ]),
        showCancelButton: false,
        confirmButtonText: '确定',
        customClass: 'order-detail-dialog',
        beforeClose: (action, instance, done) => {
          done()
        }
      })
    },
    getStatusText(status){
      const map = {
        'CREATED': '已创建',
        'PENDING': '待支付',
        'SUCCESS': '成功',
        'FAILED': '失败',
        'CLOSED': '已关闭',
        'REFUNDED': '已退款'
      }
      return map[status] || status
    },
    getStatusClass(status){
      const map = {
        'CREATED': 'created',
        'PENDING': 'pending',
        'SUCCESS': 'success',
        'FAILED': 'failed',
        'CLOSED': 'failed',
        'REFUNDED': 'pending'
      }
      return map[status] || ''
    },
    
    // 产品搜索和选择方法
    async searchProducts(queryString, callback) {
      if (!queryString || queryString.trim().length < 1) {
        callback([])
        return
      }
      
      try {
        console.log('搜索产品:', queryString)
        const { data } = await http.get(`/enterprises/${this.enterpriseId}/products/search?keyword=${encodeURIComponent(queryString.trim())}`)
        console.log('搜索结果:', data)
        if (data.code === 0) {
          callback(data.data || [])
        } else {
          console.error('搜索失败:', data.message)
          callback([])
        }
      } catch (e) {
        console.error('搜索异常:', e)
        callback([])
      }
    },
    
    onProductSelect(product) {
      this.orderForm.productId = product.id
      this.orderForm.name = product.name
      this.orderForm.amount = parseFloat(product.price)
    },
    
    formatPrice(price, currency) {
      const symbol = currency === 'USD' ? '$' : '¥'
      return `${symbol}${parseFloat(price).toFixed(2)}`
    }
  }
}
</script>

<style scoped>
.page-container {
  animation: fadeInUp 0.6s ease-out;
}

.page-header {
  position: relative;
  margin-bottom: 32px;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--primary-gradient);
  border-radius: 2px;
}

.page-title {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInDown 0.6s ease-out 0.2s both;
}

.page-subtitle {
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.card-section {
  animation: slideInUp 0.8s ease-out;
  transition: all var(--transition-normal);
}

.card-section:hover {
  transform: translateY(-2px);
}

.card-section-title {
  animation: fadeInLeft 0.6s ease-out 0.6s both;
}

.card-section-title i {
  transition: all var(--transition-normal);
}

.card-section:hover .card-section-title i {
  transform: scale(1.1);
  background: var(--primary-gradient);
  color: var(--text-primary);
}

.action-bar {
  animation: fadeInUp 0.6s ease-out 0.8s both;
  transition: all var(--transition-normal);
}

.action-bar:hover {
  background: white;
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--primary-shadow);
}

.order-form {
  animation: slideInUp 0.8s ease-out 1s both;
  transition: all var(--transition-normal);
}

.order-form:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.order-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-gradient);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.order-form:hover::before {
  opacity: 1;
}

.product-suggestion {
  padding: 12px 16px;
  transition: all var(--transition-normal);
  border-radius: var(--radius-md);
}

.product-suggestion:hover {
  background: var(--bg-primary);
  transform: translateX(4px);
}

.product-name {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  transition: color var(--transition-normal);
}

.product-suggestion:hover .product-name {
  color: var(--primary-color);
}

.product-info {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  transition: color var(--transition-normal);
}

.product-suggestion:hover .product-info {
  color: var(--text-primary);
}

/* 表格样式优化 */
:deep(.el-table) {
  animation: fadeInUp 0.8s ease-out 1.2s both;
}

:deep(.el-table th) {
  background: var(--bg-primary) !important;
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--primary-color);
  transition: all var(--transition-normal);
}

:deep(.el-table tr:hover td) {
  background: var(--bg-primary) !important;
  transform: scale(1.01);
}

:deep(.el-table td) {
  transition: all var(--transition-normal);
}

/* 按钮样式优化 */
:deep(.el-button) {
  transition: all var(--transition-normal);
  border-radius: var(--radius-md);
  font-weight: 600;
}

:deep(.el-button:hover) {
  transform: translateY(-2px);
}

:deep(.el-button--primary) {
  background: var(--primary-gradient);
  border: none;
  box-shadow: var(--primary-shadow);
}

:deep(.el-button--primary:hover) {
  box-shadow: 0 6px 20px rgba(255, 209, 0, 0.4);
}

:deep(.el-button--success) {
  background: var(--success-gradient);
  border: none;
  box-shadow: var(--success-shadow);
}

:deep(.el-button--success:hover) {
  box-shadow: 0 6px 20px rgba(6, 192, 95, 0.4);
}

:deep(.el-button--danger) {
  background: linear-gradient(135deg, #ff5757 0%, #ff4757 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(255, 87, 87, 0.3);
}

:deep(.el-button--danger:hover) {
  box-shadow: 0 6px 20px rgba(255, 87, 87, 0.4);
}

/* 状态标签样式 */
:deep(.el-tag) {
  border-radius: var(--radius-lg);
  font-weight: 600;
  padding: 6px 16px;
  border: none;
  transition: all var(--transition-normal);
}

:deep(.el-tag:hover) {
  transform: scale(1.05);
}

:deep(.el-tag--success) {
  background: var(--success-gradient);
  color: var(--text-white);
  box-shadow: var(--success-shadow);
}

:deep(.el-tag--warning) {
  background: linear-gradient(135deg, #ff8f1f 0%, #ff6b35 100%);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(255, 143, 31, 0.3);
}

:deep(.el-tag--danger) {
  background: linear-gradient(135deg, #ff5757 0%, #ff4757 100%);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(255, 87, 87, 0.3);
}

:deep(.el-tag--info) {
  background: linear-gradient(135deg, #3d7eff 0%, #3742fa 100%);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(61, 126, 255, 0.3);
}

/* 输入框样式优化 */
:deep(.el-input__inner) {
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  transition: all var(--transition-normal);
  background: var(--bg-primary);
}

:deep(.el-input__inner:focus) {
  border-color: var(--primary-color);
  background: white;
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.1);
  transform: translateY(-1px);
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__inner) {
  text-align: center;
}

/* 选择器样式优化 */
:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input__inner) {
  border-radius: var(--radius-md);
}

/* 自动完成组件样式 */
:deep(.el-autocomplete) {
  width: 100%;
}

:deep(.el-autocomplete .el-input__inner) {
  border-radius: var(--radius-md);
}

/* 动画关键帧 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-form {
    padding: 20px;
  }
  
  .action-bar {
    flex-direction: column;
    gap: 12px;
  }
  
  .action-bar .el-button {
    width: 100%;
  }
}

/* 加载状态 */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* 订单详情弹窗样式 */
:deep(.order-detail-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

:deep(.order-detail-dialog .el-message-box__header) {
  background: var(--primary-gradient);
  color: white;
  padding: 20px 24px;
  border-bottom: none;
}

:deep(.order-detail-dialog .el-message-box__title) {
  color: white;
  font-weight: 700;
  font-size: 18px;
}

:deep(.order-detail-dialog .el-message-box__close) {
  color: white;
  font-size: 20px;
}

:deep(.order-detail-dialog .el-message-box__close:hover) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.order-detail-dialog .el-message-box__content) {
  padding: 0;
}

:deep(.order-detail-dialog .el-message-box__btns) {
  padding: 20px 24px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

:deep(.order-detail-dialog .el-button--primary) {
  background: var(--primary-gradient);
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  font-weight: 600;
  box-shadow: var(--primary-shadow);
}

:deep(.order-detail-dialog .el-button--primary:hover) {
  box-shadow: 0 6px 20px rgba(255, 209, 0, 0.4);
  transform: translateY(-2px);
}

.order-detail-modal {
  background: white;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

.order-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.order-status-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  transition: all var(--transition-normal);
}

.order-status-badge.status-success {
  background: var(--success-gradient);
  color: white;
  box-shadow: var(--success-shadow);
}

.order-status-badge.status-pending {
  background: linear-gradient(135deg, #ff8f1f 0%, #ff6b35 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 143, 31, 0.3);
}

.order-status-badge.status-failed {
  background: linear-gradient(135deg, #ff5757 0%, #ff4757 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 87, 87, 0.3);
}

.order-status-badge i {
  font-size: 16px;
}

.order-amount {
  font-size: 28px;
  font-weight: 700;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(255, 209, 0, 0.2);
}

.order-info-grid {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.info-item {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-color);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.info-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-gradient);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.info-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-color);
}

.info-item:hover::before {
  opacity: 1;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-label i {
  font-size: 14px;
  color: var(--primary-color);
}

.info-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
  line-height: 1.5;
}

.info-value i {
  margin-right: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .order-amount {
    font-size: 24px;
  }
  
  .order-info-grid {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }
  
  .info-item {
    padding: 16px;
  }
}
</style>
